大家好，今天的篇章要介紹的是 Jest + Puppeteer，前一天介紹過 Puppeteer 的函式庫，想必對如何撰寫瀏覽器自動控制有一些些認識了，本篇要結合 Jest 與 Puppeteer 來進行測試

會延續前一天的專案結構接續下去進行修改，如果沒有參與到昨天的建置過程，這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-puppeteer-practice/tree/day29-puppeteer

jest-puppeteer

要先安裝不少東西

npm i -D jest jest-puppeteer ts-jest merge
npm i -D @types/jest @types/jest-environment-puppeteer @types/expect-puppeteer

package.json 修改 scripts

  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1",
+   "test": "jest",
    "start": "ts-node"
  },

然後新增 jest.config.js

npm run test -- --init

jest.config.js 裡重要的修改是 preset 這一段

+ config/combinePresets.ts

將兩種 preset 給 merge 起來，參考 這個

就可以開始寫測試囉，拿前一天 Puppeteer 寫的部分來修改

+ src/typescript-react-formik-test.ts

看起來就像是 Puppeteer 加上 Jest 的混合體呢（廢話）

值得注意的是會用 beforeAll 先將 browser 及 page 給定義起來，然後按照 test 的順序編排自動控制的動作，適時的加上 expect 就完成了！至於那個 describe 的 Google 是我忘記改了 XD

執行結果

npm run test

瀏覽器自動控制畫面省略，直接貼上測試結果

以上就是在操作 puppeteer 時，適時的加上 expect 來斷言，這樣能測試使用者最真實的行為了

最後附上原始碼
https://github.com/littlehorseboy/typescript-puppeteer-practice/tree/day30-jest-puppeteer

三十天了呢！每天發文真是非常的辛苦呀！也藉此機會順道練習更多工具，經過這次想必自己的實力有飛躍性的成長吧！